import { Card, Col, Row, Statistic, Skeleton, Grid } from 'antd'
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons'
import { useState, useEffect } from 'react'

type StatisticItem = {
    title: string
    value: number
    precision: number
    valueStyle: { color: string }
    prefix: 'up' | 'down'
    suffix: string
}
export default function Data({ BaseData }: { BaseData: StatisticItem }) {
    const [statisticList, setData] = useState<StatisticItem[]>([])
    const [loading, setLoading] = useState<boolean>(true)
    // 响应式宽度基准
    const screens = Grid.useBreakpoint()
    useEffect(() => {
        if (!BaseData) return
        setData(BaseData)
        setLoading(false)
    }, [BaseData])
    return (
        <>
            <Card className="w-full mb-5">
                <Row gutter={16}>
                    {loading
                        ? [0, 1, 2, 3].map((i) => (
                              <Col
                                  md={6}
                                  sm={12}
                                  xs={24}
                                  className="my-4"
                                  key={i}
                              >
                                  <Skeleton
                                      active
                                      avatar
                                      paragraph={false}
                                      title={{ width: '80%' }}
                                  />
                              </Col>
                          ))
                        : statisticList.map((item, index) => (
                              <Col
                                  md={6}
                                  sm={12}
                                  xs={24}
                                  className="my-4"
                                  key={index}
                              >
                                  <Card variant="borderless">
                                      <Statistic
                                          title="Active"
                                          value={item.value}
                                          precision={item.precision}
                                          valueStyle={{
                                              color: item.valueStyle.color,
                                              fontSize: screens.lg
                                                  ? 24
                                                  : screens.md
                                                  ? 14
                                                  : 18,
                                          }}
                                          prefix={
                                              item.prefix == 'up' ? (
                                                  <ArrowUpOutlined />
                                              ) : (
                                                  <ArrowDownOutlined />
                                              )
                                          }
                                          suffix={item.suffix}
                                      />
                                  </Card>
                              </Col>
                          ))}
                </Row>
            </Card>
        </>
    )
}
